<template>
  <!-- <div class="left-info-top"></div> -->
  <el-tabs type="border-card" v-model="state.configActiveName">
    <el-tab-pane label="调度设置" v-if="!state.showGoint" name="first">
      <div class="left-info-body">
        <!-- 调度方式 -->
        <div class="dispach-type-box">
          <span class="dispach-title">调度方式</span>
          <div class="type-body">
            <span class="dispach-title1">调度模型：</span>
            <div class="modle-body">
              <el-radio-group v-model="state.radioModel" class="ml-4" @change="handleChangeType">
                <el-radio :label="1" size="small">规程调度</el-radio>
                <el-radio :label="2" size="small">优化调度</el-radio>
                <el-radio :label="3" size="small">指令调度</el-radio>
                <el-radio :label="4" size="small">不拦蓄</el-radio>
                <el-radio :label="5" size="small">蓄水</el-radio>
                <el-radio :label="6" size="small">维持现状出流</el-radio>
                <el-radio v-if="state.isAiFlag" :label="8" size="small">AI智能调度</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <!-- 切换调度方式对应框 -->
        <!-- 规程调度 -->
        <div class="show-dispach-box" v-if="state.radioModel == 1">
          <!-- 调度规则 -->
          <div class="dispach-rule-box">
            <span class="dispach-title">调度规则</span>

            <el-form-item label="规程调度模型" prop="disMid">
              <el-select
                v-model="state.disMid"
                placeholder="请选择"
                @change="handleChangeRuleDispatch"
              >
                <el-option
                  v-for="item in state.rulesDispatchModel"
                  :key="item.mid"
                  :label="item.modelName"
                  :value="item.mid"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="规程调度方案" prop="disScid">
              <el-select
                v-model="state.disScid"
                placeholder="请选择"
                @change="handleChangeRuleScheme"
              >
                <el-option
                  v-for="item in state.rulesDispatchScheme"
                  :key="item.id"
                  :label="item.scName"
                  :value="Number(item.id)"
                />
              </el-select>
            </el-form-item>
          </div>
          <!--具体参数  -->
          <div class="dispach-params-box">
            <span class="dispach-title">具体参数</span>
            <div class="params-show">
              <el-table border :data="state.rulesParamsArr" style="width: 100%" height="100%">
                <el-table-column
                  prop="wlevel"
                  label="控泄水位"
                  align="center"
                  show-overflow-tooltip
                  width="100"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.wlevel" :disabled="false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="qmax"
                  label="控泄流量"
                  align="center"
                  show-overflow-tooltip
                  width="100"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.qmax" :disabled="false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="zmkaidu"
                  label="闸门开度"
                  align="center"
                  show-overflow-tooltip
                  width="100"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.zmkaidu" :disabled="false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="zmnum"
                  label="闸门数"
                  align="center"
                  show-overflow-tooltip
                  width="100"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.zmnum" :disabled="false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="dkkaidu"
                  label="底孔开度"
                  align="center"
                  show-overflow-tooltip
                  width="100"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.dkkaidu" :disabled="false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="dknum"
                  label="底孔数"
                  align="center"
                  show-overflow-tooltip
                  width="100"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.dknum" :disabled="false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="yhdnum"
                  label="溢洪道数"
                  align="center"
                  show-overflow-tooltip
                  width="100"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.yhdnum" :disabled="false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="porr"
                  label="24h降雨或径流深"
                  align="center"
                  show-overflow-tooltip
                  width="140"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.porr" :disabled="false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="porr2"
                  label="场次降雨或径流深"
                  align="center"
                  show-overflow-tooltip
                  width="140"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.porr2" :disabled="false"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 优化调度 -->
        <div class="show-dispach-box yh-box" v-if="state.radioModel == 2">
          <!-- 调度规则 -->
          <div class="dispach-rule-box">
            <span class="dispach-title">调度规则</span>
            <el-form-item label="优化调度模型" prop="disMid">
              <el-select
                v-model="state.disMid"
                placeholder="请选择"
                @change="handleChangeRuleDispatch(val)"
              >
                <el-option
                  v-for="item in state.rulesDispatchModel"
                  :key="item.mid"
                  :label="item.modelName"
                  :value="item.mid"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="优化调度方案" prop="disScid">
              <el-select
                v-model="state.disScid"
                placeholder="请选择"
                @change="handleChangeOptimScheme"
              >
                <el-option
                  v-for="item in state.rulesDispatchScheme"
                  :key="item.id"
                  :label="item.scName"
                  :value="Number(item.id)"
                />
              </el-select>
            </el-form-item>
            <div class="yharr-box">
              <el-table border :data="state.yhArr" style="width: 100%" height="100%">
                <el-table-column prop="condKey" label="参数名" align="center" />
                <el-table-column prop="condVl" label="参数值" align="center">
                  <template #default="{ row }">
                    <el-input v-model="row.condVl"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!--具体参数  -->
          <div class="dispach-params-box">
            <span class="dispach-title">具体参数</span>
            <div class="params-show">
              <el-table border :data="state.optimParamsArr" style="width: 100%" height="100%">
                <el-table-column prop="pmKey" label="参数名" align="center" />
                <el-table-column prop="pmVl" label="参数值" align="center">
                  <template #default="{ row }">
                    <el-input v-model="row.pmVl"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 指令调度 -->
        <div class="show-dispach-box" v-if="state.radioModel == 3">
          <!-- 调度规则 -->

          <InstructDispach
            :scid="state.scidIns"
            :blkcd="state.blkcd"
            ref="InstructDispachRef"
            :insPro="state.insPro"
          />
        </div>
        <!-- 更多调度方式 -->
        <div
          class="show-dispach-box"
          v-if="
            state.radioModel == 14 ||
            state.radioModel == 10 ||
            state.radioModel == 100 ||
            state.radioModel == 7
          "
        >
          <!-- 调度规则 -->
          <span class="dispach-title1">调度设置：</span>
          <div class="modle-body">
            <el-radio-group v-model="state.radioModel" class="ml-4">
              <el-radio :label="4" size="small">不拦蓄</el-radio>
              <el-radio :label="5" size="small">蓄水</el-radio>
              <el-radio :label="6" size="small">维持现状出流</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="基本条件" v-if="!state.showGoint" name="second">
      <div class="left-info-body">
        <div class="dispach-type-box1">
          <div class="dispach-rule-box">
            <span class="dispach-title">基础控制条件</span>

            <el-table border :data="state.baseCondArr" style="width: 100%; height: 200px">
              <el-table-column prop="condKey" label="参数名" align="center" />
              <el-table-column prop="condVl" label="参数值" align="center">
                <template #default="{ row }">
                  <div class="water-class" v-if="row.condKey == '洪水起调水位'">
                    <el-select
                      v-model="state.waterStart"
                      placeholder="请选择"
                      @change="handleChangeWaterStart"
                    >
                      <el-option
                        v-for="item in state.waterStartData"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                      />
                    </el-select>
                    <el-input
                      style="width: 100px"
                      v-model="row.condVl"
                      :disabled="false"
                    ></el-input>
                  </div>
                  <div v-else>
                    <el-input v-model="row.condVl" :disabled="false"></el-input>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="dispach-rule-bottom">
            <span class="dispach-title">调度规程输入参考降雨信息</span>

            <el-table border :data="state.DisPrecipitation" style="width: 100%">
              <el-table-column prop="pmKey" label="参数名" align="center" />
              <el-table-column prop="pmVal" label="参数值" align="center">
                <template #default="{ row }">
                  <el-input v-model="row.pmVal"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="联合调度目标设置" v-else name="third">
      <el-tabs @tab-change="handleChangeTab" v-model="state.activeName">
        <el-tab-pane
          v-for="(tab, index) in state.tabsList"
          :label="tab.label"
          :key="index"
          :name="index"
        >
          <div class="base-info-box">
            <div class="base-info-list">
              <dynamicTable
                :table-data="state.tableData"
                :table-headers="state.tableHeaders"
                :editColumn="state.editColumnArr"
                :schemeId="state.scid"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
  <div class="bottom-btn-box">
    <el-button type="primary" @click="handleSaveItem" v-if="state.showGoint"
      >库群参数保存</el-button
    >
    <el-button type="primary" @click="handleSaveItem" v-else>参数保存</el-button>
    <el-button type="warning" @click="handleJoinComput" v-if="state.showGoint"
      >库群参数试算</el-button
    >
    <el-button type="warning" @click="handleJoinComput" v-else>参数试算</el-button>

    <el-button type="success" @click="handleResetParams">初始参数</el-button>
  </div>
</template>
<script setup>
import { ref, reactive, defineExpose, watch } from 'vue'
import dynamicTable from '@/components/app-publicui/dynamic-table.vue'
import {
  getResvs,
  getJointResvs,
  getRegsSchemes,
  getOptimSchemes,
  addManualDispatchScheme,
  getResvCond,
  getRegsRules,
  addDispatchScheme,
  editDispatchScheme,
  dispatchDetail,
  getOptimParams,
  // 规程调度
  regsSchemesAll,
  // 优化调度
  optimSchemesAll,
  //
  getResvFLevel,
  //
  getResvConds,
  //
  getRangeParams,
  // 查询水库调度净雨值
  getDisPrecipitation
} from '@/services/modules/dispatch-manage'
import InstructDispach from './cpns/instructDispach.vue'
const InstructDispachRef = ref(null)
const state = reactive({
  isAiFlag: false,
  configActiveName: 'first',
  activeName: 0,
  editColumnArr: [],
  baseData: [],
  rangeCode: '',
  tabsList: [
    {
      label: '调度条件参数信息'
    },
    {
      label: '优化参数信息'
    },
    {
      label: '预报断面参数配置信息'
    }
  ],
  showGoint: false,
  yhArr: [],
  // 只存储
  storeArr: [],
  waterStart: 0,
  waterStartData: [
    {
      id: 0,
      label: '当前水位'
    },
    {
      id: 1,
      label: '汛限水位'
    },
    {
      id: 2,
      label: '设计水位'
    },
    {
      id: 3,
      label: '校核水位'
    }
  ],
  initData: [],
  scid: '',
  parentId: '',
  disScid: '',
  disMid: '',
  blkcd: '',
  //规程调度模型
  rulesDispatchModel: [],
  singleDataArr: [],
  baseCondArr: [],
  DisPrecipitation: [],
  radioModel: 1,
  rulesDispatchScheme: [],
  optDispatchParams: [],
  rulesParamsArr: [],
  optimParamsArr: [],
  rowItem: {
    reservoirsItem: {
      optims: [
        {
          popNum: 1,
          iterNum: 1,
          mutProb: 1,
          crocProb: 1
        }
      ],
      rules: [
        {
          wlevel: 0,
          qmax: 0
        }
      ],
      conds: {
        flevel: 2,
        mlevel: 0,
        qs: 0,
        mxq: 0
      }
    }
  }
})
const emit = defineEmits(['emitSaveItem', 'emitTryScheme', 'emitTryJoinScheme'])
// 查询预报断面基础信息
const acceptForecastSectionInfo = () => {
  getRangeParams({
    rangeCode: state.rangeCode,
    scid: state.scid
  }).then((res) => {
    if (res.code == 200) {
      state.baseData = res.data
      handleChangeTab(state.activeName)
      // handleChangeTab('0')
      // state.tableHeaders = res.data.optim.title
      // state.tableData = res.data.optim.val
    }
  })
}
//点击tabs
const handleChangeTab = (val) => {
  state.tableHeaders = []
  state.tableData = []
  switch (val) {
    case 1:
      state.tableHeaders = state.baseData.optim.title
      state.tableData = state.baseData.optim.val
      state.editColumnArr = ['参数值']
      break
    case 0:
      state.tableHeaders = state.baseData.cond.title
      state.tableData = state.baseData.cond.val
      state.editColumnArr = ['洪水起调水位', '最大下泄流量', '最高控制水位', '控制末水位']
      break
    case 2:
      state.tableHeaders = state.baseData.sections.title
      state.tableData = state.baseData.sections.val
      state.editColumnArr = ['设计流量', '校核流量']
      break

    default:
      break
  }
}
/**
 * 洪水起调水位
 *
 */
const getResvFLevelList = (item) => {
  getResvFLevel({ levelKey: item, blkcd: state.blkcd, scid: state.scid }).then((res) => {
    if (res.code === 200) {
      state.baseCondArr.forEach((item, index) => {
        if (item.condKey == '洪水起调水位') {
          item.condVl = res.data.levelVl
        }
      })
    }
  })
}
const handleChangeWaterStart = (item) => {
  getResvFLevelList(item)
}
/**
 * 初始化联合参数
 */
const initJoints = (code, arr) => {
  arr.forEach((e) => {
    if (code == e.rangeCode) {
      state.baseData = { cond: e.cond, optim: e.optim, sections: e.sections }
      handleChangeTab(state.activeName)
      // state.tableHeaders = state.baseData.optim.title
      // state.tableData = state.baseData.optim.val
      // state.editColumnArr = ['参数值']
    }
  })
}
function handleClickModel(e) {
  state.isAiFlag = false
  // 流域id
  state.waterId = e.waterId
  console.log(e, '调度规则')
  //展示联合
  state.showGoint = e.showGoint
  state.configActiveName = 'first'
  if (state.showGoint) {
    state.rangeCode = e.rangeCode
    state.configActiveName = 'third'
    //初始联合
    initJoints(e.rangeCode, e.joints)

    // acceptForecastSectionInfo()
    // debugger
  }
  if (e.isAI == 1) {
    state.isAiFlag = true
  } else {
    state.isAiFlag = false
  }
  state.parentId = e.parentId
  state.scid = e.scid
  state.scidIns = e.scidIns
  state.blkcd = e.blkcd
  state.blknm = e.blknm
  state.singleDataArr = JSON.parse(JSON.stringify(e.singleData))
  state.singleDataArr = state.singleDataArr.filter((item) => {
    return item.blkcd == e.blkcd
  })

  // 查询水库基本条件
  filterBaseData(state.singleDataArr[0].models[0].schemes[0].conds)
  if (state.singleDataArr[0].models[0].schemes[0].precipitations?.length) {
    state.DisPrecipitation = state.singleDataArr[0].models[0].schemes[0].precipitations
  } else {
    getDisPrecipitationList(state.blkcd, state.scid)
  }
  // 回显水库基本条件

  console.log('666', state.singleDataArr)
  state.radioModel = state.singleDataArr[0].disType

  state.rulesDispatchModel = state.singleDataArr[0].models
  // 初始化基本条件用
  // state.initData = JSON.parse(JSON.stringify(state.singleDataArr[0].models[0].schemes[0].conds))
  if (state.singleDataArr[0].models[0].schemes[0].ins == undefined) {
    state.insPro = ''
  } else {
     state.insPro = JSON.parse(JSON.stringify(state.singleDataArr[0].models[0].schemes[0].ins))

  }

  // 调度模型
  handleChangeRuleDispatch(state.rulesDispatchModel[0].mid)

  // 调度方案
  state.rulesDispatchScheme = state.singleDataArr[0].models[0].schemes

  // 改变调度方案
  if (state.singleDataArr[0].disType == 1) {
    handleChangeRuleScheme(state.rulesDispatchScheme[0].id)
  } else if (state.singleDataArr[0].disType == 2) {
    handleChangeOptimScheme(state.rulesDispatchScheme[0].id)
  }

  // 选中调度方式
  // handleChangeType(state.radioModel)
}
defineExpose({ handleClickModel })
// 选择调度模型 state.disMid:调度模型id
function handleChangeRuleDispatch(val) {
  state.disMid = val
  // 根据调度模型id过滤 获取调度方案列表
}
/**
 * 查询水库基本条件
 */
const getResvCondsList = (blkcd, scid) => {
  getResvConds({ scid: scid, blkcd: blkcd }).then((res) => {
    if (res.code === 200) {
      state.baseCondArr = res.data

      filterBaseData(state.baseCondArr)
      // condKey
    }
  })
}
// 查询水库净雨值
const getDisPrecipitationList = (blkcd, scid) => {
  getDisPrecipitation({ scid: scid, blkcd: blkcd }).then((res) => {
    if (res.code == 200) {
      state.DisPrecipitation = res.data
    }
  })
}
//
// 分割数组
function filterBaseData(data) {
  state.baseCondArr = JSON.parse(JSON.stringify(data))
  state.yhArr = []
  // 过滤基本条件
  state.baseCondArr = state.baseCondArr.filter((e) => {
    if (
      !e.condKey.includes('权重') &&
      !e.condKey.includes('多目标保存') &&
      // !e.condKey.includes('最大下泄流量') &&
      // !e.condKey.includes('最高控制水位') &&
      !e.condKey.includes('Q_s河道保证流量') &&
      !e.condKey.includes('指标')
    ) {
      return e
    } else {
      state.yhArr.push(e)
    }
  })
  state.storeArr = []
  state.yhArr = state.yhArr.filter((a) => {
    if (
      a.condKey == '下游削峰最大目标权重' ||
      a.condKey == '防洪库容占用最小目标权重' ||
      // a.condKey == '最大下泄流量' ||
      // a.condKey == '最高控制水位' ||
      a.condKey == 'Q_s河道保证流量'
    ) {
      return a
    } else {
      // 将用不到的目标权重和多目标保存单独存储起来
      state.storeArr.push(a)
    }
  })

  console.log(state.storeArr, '存储')
}
//
function handleSaveItem() {
  let paramsItem = {
    blkcd: state.blkcd,
    disType: state.radioModel,
    disScid: state.disScid,
    disMid: state.disMid,
    // 优化
    optims: state.optimParamsArr,
    // 规程
    rules: state.rulesParamsArr,
    // 控制条件
    // conds: state.baseCondArr,
    conds: getCondArr(),
    // 试算集合
    trials: [],
    trialData: [],
    jointTrialData: [],
    ins: InstructDispachRef.value?.state ? InstructDispachRef.value.state.ins : {},
    joint: { ...state.baseData, rangeCode: state.rangeCode, trialData: [], jointTrialData: [] },
    rangeCode: state.rangeCode,
    precipitations: state.DisPrecipitation
  }
  emit('emitSaveItem', paramsItem)
}
// 将控制条件进行拼接
function getCondArr() {
  return [...state.baseCondArr, ...state.yhArr, ...state.storeArr]
}
/**
 * 转换
 * @params item
 */
const switchData = (item) => {
  switch (item) {
    case 1:
      return '规程'
    case 2:
      return '优化'
    case 3:
      return '指令'
    case 4:
      return '不拦蓄'
    case 5:
      return '蓄水'
    case 6:
      return '维持现状出流'
    case 8:
      return 'AI智能调度'

    default:
      break
  }
}
function handleJoinComput() {
  if (state.showGoint) {
    emit('emitTryJoinScheme', {
      rangeCode: state.rangeCode,
      scid: state.scid
    })
  } else {
    let paramsItem = {
      trialName: `${state.blknm}-${switchData(state.radioModel)}试算方案`,
      scid: state.scid,
      blkcd: state.blkcd,
      disType: state.radioModel,
      disScid: state.disScid,
      disMid: state.disMid,
      optims: state.optimParamsArr,
      rules: state.rulesParamsArr,
      conds: getCondArr(),
      ins: InstructDispachRef.value?.state ? InstructDispachRef.value.state.ins : {},
      precipitations: state.DisPrecipitation
    }
    emit('emitTryScheme', { paramsItem: paramsItem })
  }
}
//初始参数
function handleResetParams() {
  handleChangeRuleScheme(state.disScid)
  handleChangeOptimScheme(state.disScid)
  // 初始基本条件
  console.log(state.initData, '初始')

  state.insPro = state.singleDataArr[0].models[0].schemes[0].ins
  // 重新获取基本条件
  getResvCondsList(state.blkcd, state.scid)
  getDisPrecipitationList(state.blkcd, state.scid)
  if (state.showGoint) {
    acceptForecastSectionInfo()
    // state.activeName = 0
  }
}
//改变规程调度
function handleChangeRuleScheme(item) {
  state.optimParamsArr = []
  state.rulesParamsArr = []
  state.disScid = item

  let flag = state.singleDataArr[0].models[0].schemes[0].rules
  // 如果原始数据有具体参数
  if (flag?.length > 0 && flag != undefined) {
    state.rulesParamsArr = JSON.parse(JSON.stringify(flag))
  } else {
    getRegsRules({ scid: item, blkcd: state.rowItem.blkcd }).then((res) => {
      if (res.code === 200) {
        state.rulesParamsArr = res.data
      }
    })
  }
}
//改变优化调度方案
function handleChangeOptimScheme(item) {
  state.optimParamsArr = []
  state.rulesParamsArr = []
  state.disScid = item
  // 如果原始数据有具体参数

  let falg = state.singleDataArr[0].models[0].schemes[0].optims
  if (falg?.length > 0 && falg != undefined) {
    state.optimParamsArr = JSON.parse(JSON.stringify(falg))
  } else {
    getOptimParams({ scid: item, blkcd: state.rowItem.blkcd }).then((res) => {
      if (res.code === 200) {
        // 获取具体参数
        state.optimParamsArr = res.data
      }
    })
  }
}
//
// 选择调度方式,获取对应的断面的调度模型及方案
// val:调度模型
function handleChangeType(val) {
  state.radioModel = val
  switch (val) {
    // 规程
    case 1:
      regsSchemesAll({ blkcd: state.blkcd, zoneId: state.waterId }).then((res) => {
        if (res.code == 200) {
          state.rulesDispatchModel = res.data[0].models

          // state.initData = JSON.parse(JSON.stringify(state.rulesDispatchModel[0]?.schemes[0].conds))
          // 默认选择第一个调度模型
          handleChangeRuleDispatch(state.rulesDispatchModel[0].mid)
          // 调度方案
          state.rulesDispatchScheme = state.rulesDispatchModel[0].schemes
          // 改变调度方案
          handleChangeRuleScheme(state.rulesDispatchScheme[0].id)
        }
      })
      break
    // 优化
    case 2:
      optimSchemesAll({ blkcd: state.blkcd, zoneId: state.waterId }).then((res) => {
        if (res.code == 200) {
          state.rulesDispatchModel = res.data[0].models

          // state.initData = JSON.parse(JSON.stringify(state.rulesDispatchModel[0]?.schemes[0].conds))
          // 默认选择第一个调度模型
          handleChangeRuleDispatch(state.rulesDispatchModel[0].mid)
          // 调度方案
          state.rulesDispatchScheme = state.rulesDispatchModel[0].schemes
          // 改变调度方案
          handleChangeOptimScheme(state.rulesDispatchScheme[0].id)
        }
      })
      break

    // 指令
    case 3:
      state.optimParamsArr = []
      state.rulesParamsArr = []
    default:
      break
  }
}
</script>
<style lang="less" scoped>
.content-table {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-bottom: 10px;
  // height: 50px;
  :deep(.el-input) {
    width: 80px;
    margin-right: 15px;
  }
  // span:nth-of-type(1) {
  //   margin-left: 10px;
  // }
  span {
    margin: 0 10px;
  }
}
.bottom-btn-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
  padding-right: 10px;
  width: 100%;
  // background-color: #409eff;
}
.el-tabs {
  // height: 100%;
  height: calc(100% - 62px);
  .base-info-box {
    height: calc(100%);
    .base-info-list {
      // padding: 0 20px;
      margin-top: 10px;
      height: calc(100% - 10px);
    }
  }
  // overflow-y: auto;
  :deep(.el-tabs__content) {
    height: calc(100% - 60px);
  }
  :deep(.el-tab-pane) {
    height: 100%;
  }
  :deep(.el-tabs__item) {
    font-size: 15px;
    font-weight: 550;
  }
}
// .left-info-top {
//   height: 39px;
//   border-bottom: 1px solid #7b7979d7;
// }
.left-info-body {
  // height: 420px;
  height: 100%;
  .dispach-title {
    height: 30px;
    line-height: 40px;
    font-size: 15px;
    color: #409eff;
    // font-weight: 600;
  }
  .dispach-title1 {
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #545252d7;
    // font-weight: 600;
  }
  .modle-body {
    .el-radio {
      margin-right: 15px;
    }
  }
  .input-with {
    width: 200px !important;
  }
  .type-body {
    display: flex;
    align-items: center;
    height: 40px;
  }
  // 调度方式
  .dispach-type-box {
    // margin-bottom: 20px;
    box-sizing: border-box;
    // padding-left: 10px;
    height: 80px;
    // background-color: rebeccapurple;
  }
  .dispach-type-box1 {
    box-sizing: border-box;
    height: 100%;
    .dispach-rule-box {
      // height: 100%;
      height: 168px;
      // :deep(.el-form-item) {
      //   margin-bottom: 10px !important;
      // }
      .dispach-title {
        display: block;
        height: 30px;
        line-height: 30px;
      }

      .el-table {
        height: calc(100% - 30px) !important;
        .water-class {
          display: flex;
        }
      }
    }
    .dispach-rule-bottom {
      height: calc(100% - 170px);

      .dispach-title {
        display: block;
        height: 30px;
        line-height: 30px;
      }
      .el-table {
        height: calc(100% - 30px) !important;
        .water-class {
          display: flex;
        }
      }
    }
  }
  // 调度方式对应框
  .show-dispach-box {
    box-sizing: border-box;
    // padding-left: 10px;
    // padding: 0 10px;
    height: calc(100% - 90px);
    overflow-y: auto;
    // background-color: red;
    // .yh-box {
    //   overflow-y: auto;
    // }
    .dispach-rule-box {
      // margin-bottom: 0px;

      :deep(.el-form-item) {
        margin-bottom: 10px !important;
      }
    }
    .dispach-params-box {
      height: calc(100% - 125px);
      overflow: hidden;
      // background-color: #409eff;
      .params-show {
        // height: 150px;
        height: calc(100% - 40px);
        overflow-y: auto;
        // background-color: red;
        .params-show-item {
          display: flex;
          align-items: center;
          height: 30px;
          margin-bottom: 5px;
          .magLeft {
            margin-left: 30px;
          }
        }
      }
    }
  }
}
</style>
